/**
 * @Author: Your name
 * @Date:   2021-04-16 22:24:32
 * @Last Modified by:   Your name
 * @Last Modified time: 2021-04-16 23:29:02
 */
<template>
  <div id="app">
    <!--top--><SideNavgation></SideNavgation>
    
    <!--top end-->

    <div class="buyticket">
      <!--页面位置-->
      <div class="bread-wrapper">
        <span>
          <a href="//www.bilibili.com">Bilibili</a>
        </span>
        <span class="symbol">&gt;</span>
        <span>
          <a href="./index.html">会员购</a>
        </span>
        <span class="symbol">&gt;</span>
        <span class="project-name">北京·随意听风阁 国风集市</span>
      </div>
      <!--页面位置-->

      <!--主要内容-->
      <div class="whole-detail-info-wrapper">
        <div
          class="detail-img-icon no_pic"
          style="background-image: url(&quot;//i2.hdslb.com/bfs/openplatform/201905/imWPruKEMU30Q.jpeg@600w_800h.jpeg&quot;);"
        ></div>
        <div class="detail-info-wrapper">
          <div class="product-info-name">北京·随意听风阁 国风集市</div>
          <div class="product-info-time-wrapper">
            <div class="product-info-time-title">时间：</div>
            <div class="product-info-time">2019.06.22 10:00 - 06.23 17:00</div>
          </div>
          <div class="vuene-wrapper">
            <div class="title">场馆：</div>
            <div class="vuene-info-content">
              <div class="vuene-name">东郎电影创意产业园</div>
              <div class="address-name">东郎电影创意产业园</div>
              <div class="address-icon fa fa-map-marker"></div>
              <div class="check-map">查看地图</div>
            </div>
          </div>
          <div class="login-show-wrapper">
            <ul class="clearfix mr4">
              <li class="title">场次：</li>
              <li class="screens">
                <div class="selectable-option active">6月22日-6月23日</div>
              </li>
            </ul>
            <ul class="clearfix">
              <li class="title">价格：</li>
              <li class="tickets">
                <div class="selectable-option active">¥20(单日早鸟票)</div>
                <div class="selectable-option">¥30(单日预售票)</div>
              </li>
            </ul>
            <ul class="clearfix">
              <li class="title">数量：</li>
              <li class="num-content">
                <div class="ticket-count">
                  <div class="count-reduce active">-</div>
                  <div class="count-number">1</div>
                  <div class="count-plus active">+</div>
                </div>
              </li>
            </ul>
            <div class="product-buy-wrapper">
              <div class="product-buy enable">
                <div @click="toplatform">立即购票</div>
              </div>
              <div class="product-buy enable">
                <div>加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--主要内容 end-->

      <!--底部-->
      <div class="footer"></div>
      <!--底部 end-->
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import SideNavgation from "../../components/SideNavgation"
export default {
  name: 'Detail',
  data() {
    return {
      msg: '',
      obj:''
    }
  },
  beforeMount(){
    this.handlerparams()
  },
  methods:{
    handlerparams(){
     this.obj=[{
        cover:'h44 ',

      project_name:'烟台·橙子动漫游戏嘉年华7.0',
        start_time:'2021.05.01',
        city_name:'烟台市',
        sale_flag_number:'1',//电子实体
        price_low:'45',
        number:'2'
      },
      {
        cover:'h4114 ',

      project_name:'烟台·橙子动漫游戏嘉年华7.0',
        start_time:'2021.05.01',
        city_name:'烟台市',
        sale_flag_number:'1',//电子实体
        price_low:45,
        number:2
      }
      ]
      this.objs = JSON.stringify(this.obj)
      
    },
     toplatform(){

       console.log('ccc')
       this.$router.push( {path:'/platform',query:{h:this.objs}})
     }
  },
  components:{
SideNavgation
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html {
  background: #fff;
}
/* 顶部 */


/* 页面位置 */
.buyticket {
  width: 100%;
  padding-bottom: 58px;
}

.bread-wrapper {
  width: 1160px;
  margin: auto;
  padding: 10px;
  display: flex;
  align-items: center;
}

.bread-wrapper span {
  color: #000;
  font-size: 12px;
  margin-right: 5px;
}

.bread-wrapper span.symbol {
  margin-bottom: 1px;
}

.bread-wrapper .project-name {
  color: #99a2aa;
}

.bread-wrapper a {
  color: #222;
  text-decoration: none;
}

/* 主要内容 */
.whole-detail-info-wrapper {
  background: #fff;
  width: 1160px;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
}

.whole-detail-info-wrapper .detail-img-icon {
  margin-right: 20px;
  width: 300px;
  height: 400px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.whole-detail-info-wrapper .detail-info-wrapper .product-info-name {
  font-size: 18px;
}

.product-info-time-wrapper {
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.product-info-time-wrapper .product-info-time-title {
  font-size: 14px;
  color: #99a2aa;
  line-height: 14px;
  margin-right: 15px;
}

.product-info-time-wrapper .product-info-time {
  font-size: 14px;
  color: #222;
  line-height: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper {
  padding-bottom: 8px;
  margin-top: 10px;
  align-items: center;
  display: flex;
  border-bottom: 1px dashed #e7ecf1;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .title {
  line-height: 38px;
  font-size: 14px;
  color: #99a2aa;
  margin-right: 15px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .vuene-info-content {
  display: flex;
  align-items: center;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .vuene-info-content .vuene-name {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 430px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .vuene-info-content .address-name {
  margin-right: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 10px;
  font-size: 12px;
  color: #99a2aa;
  line-height: 14px;
  max-width: 250px;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .address-icon {
  margin-left: 15px;
  margin-right: 5px;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.whole-detail-info-wrapper .detail-info-wrapper .vuene-wrapper .check-map {
  cursor: pointer;
  font-size: 12px;
  color: #6d757a;
  line-height: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix.mr4 {
  margin-top: 14px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .title {
  line-height: 38px;
  font-size: 14px;
  color: #99a2aa;
  margin-right: 15px;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .screens,
.whole-detail-info-wrapper .detail-info-wrapper .clearfix .tickets {
  flex: 1;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  margin-top: 10px;
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .tickets {
  -ms-flex: 1;
  flex: 1;
}

.selectable-option.active {
  height: 38px;
  line-height: 38px;
  color: #f25d8e;
  border: 1px solid #f25d8e;
  box-shadow: inset 0 0 0 1px #f25d8e;
}

.selectable-option {
  display: inline-block;
  position: relative;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 0 30px;
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  user-select: none;
  cursor: pointer;
  font-size: 12px;
}

.selectable-option.active:after {
  position: absolute;
  content: '';
  font-size: 0;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0 18px 18px;
  border-color: transparent transparent #f25d8e;
}

.selectable-option.active:before {
  display: inline-block;
  position: absolute;
  content: '';
  font-size: 0;
  line-height: 0;
  width: 6px;
  height: 4px;
  right: 1px;
  bottom: 3px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-43deg);
  z-index: 10;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix {
  margin-top: 10px;
  display: flex;
}

.whole-detail-info-wrapper .detail-info-wrapper .clearfix .num-content {
  display: flex;
}

.ticket-count {
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 3px;
  border: 1px solid #ccd0d7;
  width: 158px;
  line-height: 38px;
}

.ticket-count .count-reduce {
  margin-left: 13px;
  width: 14px;
  height: 38px;
  font-size: 38px;
  line-height: 34px;
  color: #ccd0d7;
  border-top-left-radius: 0.133rem;
  border-bottom-left-radius: 0.133rem;
}

.ticket-count .count-reduce.active,
.ticket-count .count-plus.active {
  color: #f25d8e;
}

.ticket-count .count-number {
  flex: 1;
  width: 1.44rem;
  height: 1.013rem;
  line-height: 1.013rem;
  left: 1.013rem;
  text-align: center;
}

.ticket-count .count-plus {
  margin-right: 13px;
  position: relative;
  right: 0;
  border-top-right-radius: 0.133rem;
  border-bottom-right-radius: 0.133rem;
  width: 14px;
  height: 38px;
  font-size: 26px;
  line-height: 38px;
  color: #ccd0d7;
}

.whole-detail-info-wrapper .product-buy-wrapper {
  margin-left: 57px;
  margin-top: 30px;
  display: flex;
}

.buyticket .product-buy.enable {
  color: #fff;
  background-image: linear-gradient(-48deg, #ff6a9c, #fe8574);
  box-shadow: 0 3px 4px 0 #fdb8cc;
}

.buyticket .product-buy {
  width: 240px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border-radius: 3px;
  cursor: pointer;
  background: #e4eaef;
  color: #99a2aa;
  margin-right: 20px;
}
/* 主要内容 end */

.footer {
  margin-top: 20px;
}
</style>
